{% extends "pos/base.html" %}
{% load static %}
{% block title %}Customer Recovery{% endblock %}

{% block stylesheets %}
<style>
  .filter-box .form-control,
  .filter-box .form-check-input { font-size: .85rem;}
  
  /* Print Type Modal Styles */
  .print-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
  }
  .print-modal-overlay.active {
    display: flex;
  }
  .print-modal {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
  }
  .print-modal h4 {
    margin: 0 0 8px;
    color: #1a365d;
    font-weight: 700;
  }
  .print-modal .invoice-info {
    color: #718096;
    font-size: 14px;
    margin-bottom: 20px;
  }
  .print-options {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .print-option {
    flex: 1;
    min-width: 100px;
    padding: 20px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    background: #f7fafc;
  }
  .print-option:hover {
    border-color: #3182ce;
    background: #ebf8ff;
    transform: translateY(-2px);
  }
  .print-option i {
    font-size: 28px;
    color: #3182ce;
    margin-bottom: 8px;
  }
  .print-option .label {
    font-weight: 600;
    color: #2d3748;
    font-size: 14px;
  }
  .print-option .size {
    font-size: 11px;
    color: #718096;
    margin-top: 4px;
  }
  .print-modal-close {
    margin-top: 20px;
  }

  /* ── WhatsApp Bulk Styles ── */
  :root {
    --wa-green: #25D366;
    --wa-dark: #075E54;
    --wa-teal: #128C7E;
  }

  .wa-bulk-bar {
    background: linear-gradient(135deg, var(--wa-dark), var(--wa-teal));
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  .wa-bulk-bar .wa-info {
    color: #fff;
    font-size: 14px;
  }
  .wa-bulk-bar .wa-info strong {
    font-size: 16px;
  }
  .wa-btn-bulk {
    background: var(--wa-green);
    border: none;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .wa-btn-bulk:hover { background: #1ebe5d; color: #fff; }
  .wa-btn-bulk:disabled { opacity: .5; cursor: not-allowed; }
  .wa-btn-stop {
    background: #e74c3c;
    border: none;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    display: none;
  }
  .wa-btn-stop:hover { background: #c0392b; color: #fff; }

  /* Progress Bar */
  .wa-progress-section {
    display: none;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
  }
  .wa-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    color: #495057;
  }
  .wa-progress-header .sent { color: #155724; font-weight: 600; }
  .wa-progress-header .failed { color: #721c24; font-weight: 600; }
  .wa-progress-bar {
    background: #e9ecef;
    border-radius: 20px;
    height: 6px;
    overflow: hidden;
  }
  .wa-progress-fill {
    background: linear-gradient(90deg, var(--wa-green), #1ebe5d);
    height: 100%;
    width: 0%;
    transition: width .3s ease;
  }
  .wa-progress-text {
    text-align: center;
    margin-top: 6px;
    font-size: 12px;
    color: #6c757d;
  }

  /* Row Styles */
  #dataTable tbody tr.row-sent { background: #f0fff4 !important; }
  #dataTable tbody tr.row-failed { background: #fff5f5 !important; }
  #dataTable tbody tr.row-sending { background: #fffbeb !important; }

  .wa-status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
  }
  .wa-status-badge.pending { background: #f1f3f4; color: #5f6368; }
  .wa-status-badge.sending { background: #fff3cd; color: #856404; }
  .wa-status-badge.sent { background: #d4edda; color: #155724; }
  .wa-status-badge.failed { background: #f8d7da; color: #721c24; }

  /* Toast */
  .wa-toast {
    position: fixed; top: 20px; right: 20px;
    padding: 12px 20px; border-radius: 8px;
    color: #fff; font-weight: 600; z-index: 99999;
    transform: translateX(400px); transition: transform .3s ease;
    font-size: 14px;
  }
  .wa-toast.show { transform: translateX(0); }
  .wa-toast.success { background: var(--wa-green); }
  .wa-toast.error { background: #e74c3c; }
  .wa-toast.warning { background: #f39c12; }
</style>
{% endblock %}

{% block heading %}Customer Recovery{% endblock %}

{% block content %}

<!-- Toast -->
<div class="wa-toast" id="waToast"></div>

<!-- PRINT TYPE MODAL -->
<div class="print-modal-overlay" id="printModal">
  <div class="print-modal">
    <h4><i class="fas fa-print mr-2"></i>Select Print Size</h4>
    <div class="invoice-info" id="printModalInvoiceInfo">Invoice #---</div>
    <div class="print-options">
      <div class="print-option" data-type="thermal">
        <i class="fas fa-receipt"></i>
        <div class="label">Thermal</div>
        <div class="size">80mm Receipt</div>
      </div>
      <div class="print-option" data-type="a5">
        <i class="fas fa-file-alt"></i>
        <div class="label">A5</div>
        <div class="size">Half Page</div>
      </div>
      <div class="print-option" data-type="a4">
        <i class="fas fa-file"></i>
        <div class="label">A4</div>
        <div class="size">Full Page</div>
      </div>
    </div>
    <button type="button" class="btn btn-secondary btn-sm print-modal-close" onclick="closePrintModal()">
      <i class="fas fa-times mr-1"></i>Cancel
    </button>
  </div>
</div>

<!-- ─────────────────────────────  FILTER BAR  ────────────────────────────── -->
<form method="get" class="filter-box mb-3">
  <div class="row align-items-end">
    <!-- invoice -->
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Search by Transaction #</label>
      <input type="text" name="invoice" value="{{ invoice_q }}" class="form-control" placeholder="Invoice #" >
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="invoice"
               id="fInvoice" {% if picked_filter == "invoice" %}checked{% endif %}>
        <label class="form-check-label small" for="fInvoice">Use</label>
      </div>
    </div>

    <!-- customer -->
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Search by Customer</label>
      <input type="text" name="customer" value="{{ customer_q }}" class="form-control" placeholder="Customer name">
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="customer"
               id="fCustomer" {% if picked_filter == "customer" %}checked{% endif %}>
        <label class="form-check-label small" for="fCustomer">Use</label>
      </div>
    </div>

    <!-- date range -->
    <div class="col-md-4 mb-2">
      <label class="small mb-1 d-block">Search by Date</label>
      <div class="d-flex">
        <input type="date" name="date_from" value="{{ date_from_q }}" class="form-control me-1">
        <input type="date" name="date_to"   value="{{ date_to_q }}"   class="form-control">
      </div>
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="date"
               id="fDate" {% if picked_filter == "date" %}checked{% endif %}>
        <label class="form-check-label small" for="fDate">Use</label>
      </div>
    </div>

    <!-- action -->
    <div class="col-auto mb-2">
      <button type="submit" class="btn btn-primary btn-sm">
        <i class="fas fa-search me-1"></i>Search
      </button>
      <a href="{% url 'transactions:customer_recovery' %}" class="btn btn-secondary btn-sm">Reset</a>
    </div>
  </div>

  <!-- ── NEW ROW: Booker & Area filters ── -->
  <div class="row align-items-end mt-2">
    <!-- Order Booker -->
    <div class="col-md-4 mb-2">
      <div class="d-flex align-items-center mb-1">
        <div class="form-check me-2">
          <input class="form-check-input" type="checkbox" name="filter_booker"
                 id="fBooker" {% if use_booker %}checked{% endif %}>
          <label class="form-check-label small" for="fBooker">Filter by Order Booker</label>
        </div>
      </div>
      <select id="order_booker_select" name="order_booker_ids"
              class="form-control" multiple="multiple" style="width:100%;">
        {% for b in sel_bookers %}
          <option value="{{ b.t_id }}" selected>{{ b.name }}</option>
        {% endfor %}
      </select>
    </div>

    <!-- Sale Area -->
    <div class="col-md-4 mb-2">
      <div class="d-flex align-items-center mb-1">
        <div class="form-check me-2">
          <input class="form-check-input" type="checkbox" name="filter_area"
                 id="fArea" {% if use_area %}checked{% endif %}>
          <label class="form-check-label small" for="fArea">Filter by Sale Area</label>
        </div>
      </div>
      <select id="sale_area_select" name="sale_area_ids"
              class="form-control" multiple="multiple" style="width:100%;">
        {% for a in sel_areas %}
          <option value="{{ a.t_id }}" selected>{{ a.area_name }}</option>
        {% endfor %}
      </select>
    </div>
  </div>
</form>

<!-- ───────────────────────  CREATE NEW RECOVERY BUTTON  ─────────────────────── -->
<div class="row ml-0 mb-3">
  <a href="{% url 'transactions:recovery_add' %}">
    <button type="button" class="btn btn-success font-weight-bold">
      <i class="fas fa-plus mr-2"></i> Create new Recovery Invoice
    </button>
  </a>
</div>

<!-- ═══════════ BULK WHATSAPP BAR ═══════════ -->
<div class="wa-bulk-bar">
  <div class="wa-info">
    <i class="fab fa-whatsapp mr-2"></i>
    <strong id="selectedCount">0</strong> selected for bulk WhatsApp
  </div>
  <div>
    <button class="wa-btn-bulk" id="waBtnBulk" onclick="startBulkSend()" disabled>
      <i class="fab fa-whatsapp"></i> Send Bulk WhatsApp
    </button>
    <button class="wa-btn-stop" id="waBtnStop" onclick="stopBulkSend()">
      <i class="fas fa-stop"></i> Stop
    </button>
  </div>
</div>

<!-- Progress Section -->
<div class="wa-progress-section" id="waProgressSection">
  <div class="wa-progress-header">
    <span id="waProgressLabel">Sending messages...</span>
    <div>
      <span class="sent"><i class="fas fa-check-circle mr-1"></i><span id="statSent">0</span></span>
      <span class="failed ml-3"><i class="fas fa-times-circle mr-1"></i><span id="statFailed">0</span></span>
    </div>
  </div>
  <div class="wa-progress-bar">
    <div class="wa-progress-fill" id="waProgressFill"></div>
  </div>
  <div class="wa-progress-text" id="waProgressText">0 / 0</div>
</div>

<!-- ─────────────────────────────  TABLE  ────────────────────────────── -->
<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">Customer Recovery</h6>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th style="width:40px;">
              <input type="checkbox" id="selectAll" onclick="toggleSelectAll(this)" title="Select All">
            </th>
            <th style="width:10%">Invoice #</th>
            <th style="width:12%">Date</th>
            <th style="width:20%">Customer</th>
            <th class="text-end" style="width:10%">Previous</th>
            <th class="text-end" style="width:10%">Received</th>
            <th class="text-end" style="width:10%">Remainings</th>
            <th style="width:70px;">Status</th>
            <th class="text-center" style="width:18%">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for s in recoveries %}
          <tr id="row-{{ s.description }}"
              data-invoice="{{ s.description }}"
              data-customer="{{ s.party_descp }}"
              data-date="{{ s.transaction_date }}"
              data-amount="{{ s.amount_transaction }}"
              data-balance="{{ s.previous_balance }}"
              data-remaining="{{ s.remaining_balance }}"
              data-mobile="{{ s.customer_mobile }}">
            <td><input type="checkbox" class="row-check" value="{{ s.description }}"></td>
            <td>{{ s.description }}</td>
            <td>{{ s.transaction_date }}</td> 
            <td>{{ s.party_descp }}</td>
            <td class="text-end">{{ s.previous_balance|floatformat:2 }}</td>
            <td class="text-end">{{ s.amount_transaction|floatformat:2 }}</td>
            <td class="text-end">{{ s.remaining_balance|floatformat:2 }}</td>
            <td><span class="wa-status-badge pending" id="status-{{ s.description }}">—</span></td>
            <td class="text-center">
              <a href="{% url 'transactions:recovery_edit' s.description %}" class="btn btn-warning btn-sm" title="Edit">
                <i class="fas fa-edit"></i>
              </a>
              <a href="{% url 'transactions:recovery_delete' s.description %}"
                 class="btn btn-danger btn-sm"
                 onclick="return confirm('Delete invoice #{{ s.description }}?');"
                 title="Delete">
                <i class="fas fa-trash"></i>
              </a>
              <button type="button" 
                      class="btn btn-info btn-sm print-btn" 
                      data-invoice="{{ s.description }}"
                      data-customer="{{ s.party_descp }}"
                      title="Print">
                <i class="fas fa-print"></i>
              </button>
              <button type="button" 
                      class="btn btn-sm wa-single-btn"
                      style="background:#25D366;border-color:#25D366;color:#fff;"
                      onclick="sendSingle('{{ s.description }}')"
                      title="Send WhatsApp">
                <i class="fab fa-whatsapp"></i>
              </button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="text-end mt-3">
      <span class="badge p-2" style="background:#01478f; color:#ffffff; font-size:1rem;">
        Grand&nbsp;Total:&nbsp;{{ grand_total|floatformat:2 }}
      </span>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
(function() {

  const WA_API = 'http://localhost:3000';
  const WA_SIGNATURE = '\n\n━━━━━━━━━━━━━━━\n_Automated Message from Blue Primes Software (blueprimes.com)_';

  let isSending = false;
  let stopFlag = false;
  let sentCount = 0;
  let failedCount = 0;
  let dataTable = null;
  let defaultTemplate = '';

  // ══════════════ HELPERS ══════════════
  function toast(msg, type) {
    const el = document.getElementById('waToast');
    el.textContent = msg;
    el.className = 'wa-toast ' + (type || 'success');
    setTimeout(() => el.classList.add('show'), 10);
    setTimeout(() => el.classList.remove('show'), 3500);
  }

  function setStatus(invoiceNo, status) {
    const badge = document.getElementById('status-' + invoiceNo);
    if (!badge) return;
    badge.className = 'wa-status-badge ' + status;
    const labels = { pending: '—', sending: 'Sending…', sent: '✓ Sent', failed: '✗ Failed' };
    badge.textContent = labels[status] || status;

    const row = document.getElementById('row-' + invoiceNo);
    if (row) {
      row.classList.remove('row-sent', 'row-failed', 'row-sending');
      if (status === 'sent') row.classList.add('row-sent');
      if (status === 'failed') row.classList.add('row-failed');
      if (status === 'sending') row.classList.add('row-sending');
    }
  }

  function updateProgress(current, total) {
    const pct = total > 0 ? Math.round((current / total) * 100) : 0;
    document.getElementById('waProgressFill').style.width = pct + '%';
    document.getElementById('waProgressText').textContent = current + ' / ' + total;
    document.getElementById('statSent').textContent = sentCount;
    document.getElementById('statFailed').textContent = failedCount;
  }

  function updateSelectedCount() {
    const count = document.querySelectorAll('.row-check:checked').length;
    document.getElementById('selectedCount').textContent = count;
    document.getElementById('waBtnBulk').disabled = count === 0 || isSending;
  }

  function formatPhone(mobile) {
    if (!mobile) return '';
    let p = String(mobile).replace(/\D/g, '');
    if (p.startsWith('0')) p = '92' + p.substring(1);
    return p;
  }

  function buildMessage(template, data) {
    return template
      .replace(/\{customer_name\}/gi, data.customer || '')
      .replace(/\{invoice_no\}/gi, data.invoice || '')
      .replace(/\{date\}/gi, data.date || '')
      .replace(/\{amount\}/gi, data.amount || '')
      .replace(/\{balance\}/gi, data.balance || '')
      .replace(/\{remaining\}/gi, data.remaining || '')
      .replace(/\{mobile\}/gi, data.mobile || '')
      .replace(/\{address\}/gi, '')
      .replace(/\{remarks\}/gi, '');
  }

  function getRandomDelay() {
    // Random delay between 30-45 seconds
    return (30 + Math.floor(Math.random() * 16)) * 1000;
  }

  function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }

  // ══════════════ FETCH DEFAULT TEMPLATE ══════════════
  async function fetchDefaultTemplate() {
    try {
      const resp = await fetch("{% url 'pos:whatsapp_template_get_default' 'recovery' %}", {
        method: 'GET',
        credentials: 'same-origin',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      });
      const data = await resp.json();
      if (data.ok && data.template_text) {
        defaultTemplate = data.template_text;
      } else {
        defaultTemplate = getFallbackTemplate();
      }
    } catch (err) {
      defaultTemplate = getFallbackTemplate();
    }
  }

  function getFallbackTemplate() {
    return `*{customer_name}*

✅ Rs. {amount} received
📝 Receipt# {invoice_no}
📋 Balance: Rs. {remaining}
📅 Date: {date}

Thank you! 🙏`;
  }

  // ══════════════ SELECT ALL ══════════════
  window.toggleSelectAll = function(master) {
    const rows = dataTable ? dataTable.rows({ search: 'applied' }).nodes() : [];
    $(rows).find('.row-check').prop('checked', master.checked);
    updateSelectedCount();
  };

  // ══════════════ SEND SINGLE ══════════════
  window.sendSingle = async function(invoiceNo) {
    if (!defaultTemplate) await fetchDefaultTemplate();

    const row = document.getElementById('row-' + invoiceNo);
    if (!row) return;

    const data = {
      invoice: row.dataset.invoice,
      customer: row.dataset.customer,
      date: row.dataset.date,
      amount: row.dataset.amount,
      balance: row.dataset.balance,
      remaining: row.dataset.remaining,
      mobile: row.dataset.mobile,
    };

    const phone = formatPhone(data.mobile);
    if (!phone) { 
      toast('No mobile number!', 'warning'); 
      return; 
    }

    setStatus(invoiceNo, 'sending');

    try {
      const msg = buildMessage(defaultTemplate, data) + WA_SIGNATURE;
      const fd = new FormData();
      fd.append('phone', phone);
      fd.append('message', msg);

      const resp = await fetch(WA_API + '/api/send-media', { method: 'POST', body: fd });
      const result = await resp.json();

      if (result.success) {
        setStatus(invoiceNo, 'sent');
        toast('✅ Sent to ' + data.customer, 'success');
      } else {
        setStatus(invoiceNo, 'failed');
        toast('❌ Failed: ' + (result.error || 'Unknown'), 'error');
      }
    } catch (err) {
      setStatus(invoiceNo, 'failed');
      toast('❌ Server not reachable', 'error');
    }
  };

  // ══════════════ BULK SEND ══════════════
  window.startBulkSend = async function() {
    const checked = document.querySelectorAll('.row-check:checked');
    if (checked.length === 0) { toast('Select at least one recovery!', 'warning'); return; }

    if (!defaultTemplate) await fetchDefaultTemplate();

    isSending = true;
    stopFlag = false;
    sentCount = 0;
    failedCount = 0;

    document.getElementById('waBtnBulk').style.display = 'none';
    document.getElementById('waBtnStop').style.display = 'inline-block';
    document.getElementById('waProgressSection').style.display = 'block';
    document.getElementById('waProgressLabel').textContent = 'Sending messages...';

    // Reset statuses
    checked.forEach(cb => setStatus(cb.value, 'pending'));
    updateProgress(0, checked.length);

    // Build queue
    const queue = [];
    checked.forEach(cb => {
      const row = document.getElementById('row-' + cb.value);
      if (row) {
        queue.push({
          invoice: row.dataset.invoice,
          customer: row.dataset.customer,
          date: row.dataset.date,
          amount: row.dataset.amount,
          balance: row.dataset.balance,
          remaining: row.dataset.remaining,
          mobile: row.dataset.mobile,
        });
      }
    });

    // Send loop
    for (let i = 0; i < queue.length; i++) {
      if (stopFlag) break;

      const c = queue[i];
      const phone = formatPhone(c.mobile);

      if (!phone) {
        setStatus(c.invoice, 'failed');
        failedCount++;
        updateProgress(i + 1, queue.length);
        continue;
      }

      setStatus(c.invoice, 'sending');

      // Scroll to row
      const row = document.getElementById('row-' + c.invoice);
      if (row) row.scrollIntoView({ behavior: 'smooth', block: 'center' });

      try {
        const msg = buildMessage(defaultTemplate, c) + WA_SIGNATURE;
        const fd = new FormData();
        fd.append('phone', phone);
        fd.append('message', msg);

        const resp = await fetch(WA_API + '/api/send-media', { method: 'POST', body: fd });
        const result = await resp.json();

        if (result.success) {
          setStatus(c.invoice, 'sent');
          sentCount++;
        } else {
          setStatus(c.invoice, 'failed');
          failedCount++;
        }
      } catch (err) {
        setStatus(c.invoice, 'failed');
        failedCount++;
      }

      updateProgress(i + 1, queue.length);

      // Delay before next (30-45 seconds)
      if (i < queue.length - 1 && !stopFlag) {
        const delay = getRandomDelay();
        document.getElementById('waProgressLabel').textContent = `Waiting ${Math.round(delay/1000)}s...`;
        await sleep(delay);
        document.getElementById('waProgressLabel').textContent = 'Sending messages...';
      }
    }

    // Done
    isSending = false;
    document.getElementById('waBtnBulk').style.display = 'inline-block';
    document.getElementById('waBtnStop').style.display = 'none';
    document.getElementById('waProgressLabel').textContent = stopFlag ? 'Stopped' : 'Complete!';
    updateSelectedCount();

    toast(stopFlag ? `Stopped. Sent: ${sentCount}` : `✅ Done! Sent: ${sentCount}, Failed: ${failedCount}`, 
          stopFlag ? 'warning' : 'success');
  };

  window.stopBulkSend = function() {
    stopFlag = true;
    document.getElementById('waBtnStop').textContent = 'Stopping...';
  };

  // ══════════════ INIT ══════════════
  $(document).ready(function() {
    $.ajaxSetup({ headers: { 'X-CSRFToken': '{{ csrf_token }}' } });

    // DataTable
    dataTable = $('#dataTable').DataTable({ 
      order: [[1, 'desc']],
      columnDefs: [{ orderable: false, targets: [0, 7, 8] }]
    });

    // Select2
    $('#order_booker_select').select2({
      placeholder: 'Select Booker(s)',
      multiple: true,
      ajax: {
        url: "{% url 'customers:get_order_bookers' %}",
        type: 'POST', delay: 250,
        data: p => ({ term: p.term }),
        processResults: d => ({ results: d }),
      }
    });
    $('#sale_area_select').select2({
      placeholder: 'Select Area(s)',
      multiple: true,
      ajax: {
        url: "{% url 'customers:get_sale_areas' %}",
        type: 'POST', delay: 250,
        data: p => ({ term: p.term }),
        processResults: d => ({ results: d }),
      }
    });

    $('#order_booker_select').on('select2:open select2:select', () => $('#fBooker').prop('checked', true));
    $('#sale_area_select').on('select2:open select2:select', () => $('#fArea').prop('checked', true));

    // Checkbox change
    $(document).on('change', '.row-check', function() {
      updateSelectedCount();
      // Sync select all
      const total = dataTable ? $(dataTable.rows({ search: 'applied' }).nodes()).find('.row-check').length : 0;
      const checked = document.querySelectorAll('.row-check:checked').length;
      document.getElementById('selectAll').checked = (total > 0 && checked >= total);
    });

    // Fetch template on load
    fetchDefaultTemplate();
    updateSelectedCount();
  });

  // ══════════════ PRINT MODAL ══════════════
  let pendingPrintInvoiceNo = null;

  window.openPrintModal = function(invoiceNo, customerName) {
    pendingPrintInvoiceNo = invoiceNo;
    document.getElementById('printModalInvoiceInfo').textContent = 
      'Invoice #' + invoiceNo + (customerName ? ' - ' + customerName : '');
    document.getElementById('printModal').classList.add('active');
  };

  window.closePrintModal = function() {
    document.getElementById('printModal').classList.remove('active');
    pendingPrintInvoiceNo = null;
  };

  window.executePrint = function(printType) {
    if (!pendingPrintInvoiceNo) return;
    const url = "{% url 'transactions:recovery_receipt' 0 %}".replace('0', pendingPrintInvoiceNo) + printType + '/';
    window.open(url, '_blank');
    closePrintModal();
  };

  // Print option clicks
  document.querySelectorAll('.print-option').forEach(opt => {
    opt.addEventListener('click', () => executePrint(opt.dataset.type));
  });

  // Print button clicks
  document.querySelectorAll('.print-btn').forEach(btn => {
    btn.addEventListener('click', () => openPrintModal(btn.dataset.invoice, btn.dataset.customer));
  });

  // Modal close
  document.getElementById('printModal').addEventListener('click', function(e) {
    if (e.target === this) closePrintModal();
  });
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closePrintModal();
  });

})();
</script>
{% endblock %}